<template lang="">
    <div>
        <!-- 卡片 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style=" margin-bottom:20px ;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    
    <!-- 表格 -->
    <el-card class="box-card">
        <div class="Eddbox">
        <el-button type="primary" @click="dialogFormVisible = true">添加角色</el-button>
        </div>
   <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column type="expand">
        <!-- 一级菜单 -->
        <template slot-scope="scoped">
            <el-row  v-for="(item1,index1) in scoped.row.children" :key="index1">
            <el-col :span="8">
            <div>
            <el-tag  @close="handleClose(scoped.row.id,item1.id)" closable>{{item1.authName}}</el-tag>
            <span class="el-icon-caret-right"></span>
            </div>
            </el-col>
            <el-col :span="16">
                <!-- 二级菜单 -->
                <div>
                <el-row v-for="(item2,index2) in item1.children" :key="index2">
                    <el-col :span="8">
                        <div>
                        <el-tag type="danger" closable>{{item2.authName}}</el-tag>
                        <span class="el-icon-caret-right"></span>
                        </div>
                        </el-col>
                   
                       <el-col :span="16">
                           <div>
                           <el-tag style="margin:5px;" closable type="warning"  v-for="(item3,index3) in item2.children" :key="index3">{{item3.authName}}</el-tag>
                           </div>
                           </el-col>
                           
                   
                </el-row>
                </div>
            </el-col>
            </el-row>

             
        </template>
    </el-table-column>

    <el-table-column
      type="index"
      label="#"
      width="50">
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="角色名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="roleDesc"
      label="角色描述"
      width="180">
    </el-table-column>
    <el-table-column prop="address" label="操作">
        <!-- 按钮 -->
          <template slot-scope='scope'>
            <el-button size="mini" type="primary" @click="dialogFormVisibleEdit=true,clickBTN(scope.row)">
              <i class="el-icon-edit"></i>编辑
            </el-button>
            <el-button size="mini" type="danger" @click="DelRoules(scope.row.id)">
              <i class="el-icon-delete"></i>删除
            </el-button>
            <el-button size="mini" type="warning" @click="allocationRolrs(scope.row)">
              <i class="el-icon-s-tools"></i>分配权限
            </el-button>
          </template>
    </el-table-column>
      
       
  </el-table>
 </el-card>

<!--   添加角色弹出层 -->
<!-- Form -->
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
      <el-input v-model="form.roleName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
      <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addRolesList">确 定</el-button>
  </div>
</el-dialog>

<!-- 编辑角色 -->
<el-dialog title="收货地址" :visible.sync="dialogFormVisibleEdit">
  <el-form :model="formEdit" ref="formEdit" :rules="rulesEdit">
    <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
      <el-input v-model="formEdit.roleName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
      <el-input v-model="formEdit.roleDesc" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleEdit = false,getRolesList()">取 消</el-button>
    <el-button type="primary" @click="addRolesListEdit">确 定</el-button>
  </div>
</el-dialog>

<!-- 分配权限 -->
<el-dialog title="分配权限" :visible.sync="dialogFormVisibleRoles">
  
  <el-tree
  :default-expand-all="true"
  :data="treesList"
  show-checkbox
  node-key="id"
  ref="tree"
  
  :default-checked-keys="checkedList"
  :props="defaultProps">
</el-tree>


  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleRoles=false,getRolesList()">取 消</el-button>
    <el-button type="primary" @click="addRole">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>


<script>
// 导入接口
import {
  rolesList_api,
  addRoles_api,
  EditRoles_api,
  deleteRoles_api,
  RightsList_api,
  authorizationRoles_api,
  deleteRolesAuth_api
} from "@/api/index.js";
export default {
  data() {
    return {
      // 默认选中的列表
      checkedList:[],
      tableData: [],
      treesList:[],
      defaultProps: {
        children: "children",
        label: "authName",
      },
      // 分配权限
      dialogFormVisibleRoles: false,
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      formLabelWidth: "120px",
      form: {
        roleName: "",
        roleDesc: "",
      },
      formEdit: {
        id: "",
        roleName: "",
        roleDesc: "",
      },
      closable:false,
      // 角色id
      rouleID:{
        roleId:'',
        rids:''
      },
      rules: {
        //用户名表单验证
        roleName: [
          { required: true, message: "请输入角色名", trigger: "blur" },
        ],
        // 密码表单验证
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      rulesEdit: {
        //用户名表单验证
        roleName: [
          { required: true, message: "请输入角色名", trigger: "blur" },
        ],
        // 密码表单验证
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getRolesList();
  },
  methods: {
    async getRolesList() {
      const { data: res } = await rolesList_api();
      //   console.log(res, 1111);
      this.tableData = res.data;
    },
    // 添加角色
    addRolesList() {
      // 二次验证
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.dialogFormVisible = false;
        const { data: res } = await addRoles_api(this.form);
        // console.log(res, 111);
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
        //  刷新列表
        this.getRolesList();
        // 清空表单
        this.$refs.form.resetFields();
      });
    },
    // 点击编辑按钮，携带参数
    clickBTN(row) {
      this.formEdit = row;
    },
    // 编辑
    addRolesListEdit() {
      console.log(this.formEdit);
      // 二次验证
      this.$refs.formEdit.validate(async (valid) => {
        if (!valid) return;
        this.dialogFormVisibleEdit = false;
        const { data: res } = await EditRoles_api(this.formEdit);
        // console.log(res, 111);
        this.$message({
          message: "编辑成功！",
          type: "success",
        });
        //  刷新列表
        this.getRolesList();
        // 清空表单
        this.$refs.formEdit.resetFields();
      });
    },
    // 删除角色
    async DelRoules(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          //   发送请求
          const { data: res } = await deleteRoles_api(id);
          this.$message({
            type: "success",
            message: res.meta.msg,
          });
          //  刷新列表
          this.getRolesList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击分配权限
   async allocationRolrs(row) {
    //  清空选中框
      this.treesList = []
     this.rouleID.roleId = row.id
      this.dialogFormVisibleRoles = true;
      // 发送请求获取数据
       const {data:res} = await RightsList_api('tree')
      //  console.log(res,2222);
      //  赋值于数据层
      this.treesList = res.data
      // 调用递归函数
      // console.log(row,111);
      
     this.digui(row,this.checkedList)
      // console.log(this.checkedList);
      
    },
    // 使用递归函数找到最底层的数据id选中
    digui(row,arr){
      
  //  1、如果你有children  就继续找，如果没有直接获取id并且终止
      if(!row.children) return arr.push(row.id)
      // 遍历出row.children 找到id 并添加到数组中
      row.children.forEach(item=>{
        this.digui(item,arr)
      })
    },
    // 分配权限弹出层确定按钮
   async addRole(){
    
    //  获取选中的角色权限
    var keys = [
      ...this.$refs.tree.getCheckedKeys(),
      ...this.$refs.tree.getHalfCheckedKeys()
    ]
    // 通过join将合并后的数组转成字符串
    this.rouleID.rids = keys.join()
    // console.log(this.rouleID,1111);
    
     const {data:res} =await authorizationRoles_api(this.rouleID)
    //  console.log(res);
      // 关闭弹窗
      this.dialogFormVisibleRoles=false
      // 刷新列表
      this.getRolesList();
      // 弹出提示
      this.$message({
          message:res.meta.msg,
          type: "success",
        });
     
    },
    // 删除指定角色的权限
    async handleClose(roleId,rightId){
      const {data:res} = await  deleteRolesAuth_api(roleId,rightId)
      // console.log(res,111);
      if(res.meta.status == 200){
        this.closable = true
      }

            // 弹出提示
      this.$message({
          message:res.meta.msg,
          type: "success",
        });
              // 刷新列表
      // this.getRolesList();
    }
  },
};
</script>
<style lang="less" scoped>
.Eddbox {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
</style>